<template>
  <div>
    <img src="../assets\headerlogo.png" alt="" class="headerlogo" />
    <ul class="headerul">
      <li><router-link to="/find">推荐</router-link></li>
      <li><router-link to="/find">皮肤</router-link></li>
      <li><router-link to="/find">联系我</router-link></li>
      <li><router-link to="/find">下载客户端</router-link></li>
    </ul>
    <input
      type="text"
      v-model="$store.state.inputvalue"
      @keyup.enter="find"
      class="search"
      placeholder="输入关键字查询"
    />
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      
    }
  },
  methods:{
    find(){
      axios({
        url: "https://autumnfish.cn/search",
        method: "get",
        params: {
          keywords: this.$store.state.inputvalue,
        },
      }).then((res) => {
        console.log(res);
        this.$store.state.findresults = res.data.result.songs;
      });
      this.$router.push({path: '/findresult'});
    }
  }
};
</script>

<style>
.headerlogo {
  width: 150px;
  height: 110px;
  margin: 0 30px;
  float: left;
}
.headerul {
  float: left;
}
.headerul li {
  list-style: none;
  float: left;
  margin: 0 20px;
  line-height: 80px;
}
.search {
  height: 30px;
  width: 250px;
  border: none;
  text-indent: 10px;
  /* border: 2px solid rgb(196, 196, 204); */
  /* border-radius: 5px; */
  position: relative;
  top: 40px;
  left: 50px;
}
.search:focus {
  /* border-style:solid; */
  /* border-color: #03a9f4; */
 outline: none;
  box-shadow: 0 0 15px #03a9f4;
}

</style>